<template>
  <div class="app-container">
    <!-- 新增/修改角色组，新增角色dialog -->
    <Edialog
      :title="groupTitle"
      :outershow="roleShow"
      saveClick
      @close="
        roleShow = false
        $refs.form.clearValidate()
      "
      @saveFn="groupSaveFn"
    >
      <div style="padding: 0 20px">
        <el-form
          ref="form"
          :model="form"
          label-width="100px"
          :rules="roleRules"
        >
          <el-form-item :label="label" prop="encoded">
            <el-input v-model="form.encoded" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </Edialog>
  </div>
</template>

<script>
import Edialog from '@/components/Edialog'
import {
  putSysRoleGroup,
  postSysRoleGroup,
  putSysRole,
  postSysRole
} from '@/api/management/role'
import { fd } from '@/utils'
export default {
  components: {
    Edialog
  },
  data () {
    return {
      // 表单校验
      roleRules: {
        encoded: [
          {
            required: true,
            message: '请输入',
            trigger: 'blur'
          },
          { min: 1, max: 20, message: '请输入1-20位', trigger: 'blur' }
        ]
      },
      roleShow: false,
      groupTitle: '',
      form: {
        encoded: ''
      },
      groupClickId: '',
      roleClickId: '',
      label: ''
    }
  },
  methods: {
    open (val, groupClickId) {
      this.groupClickId = groupClickId
      if (val == 1) {
        this.groupTitle = '新增角色组'
        this.form.encoded = ''
        this.label = '角色组'
      } else if (val == 2) {
        this.form.encoded = ''
        this.groupTitle = '新增角色'
        this.label = '角色名称'
      } else if (val.GROUP_ID) {
        this.roleClickId = val.ID
        this.form.encoded = val.ROLE_NAME
        this.groupTitle = '修改角色'
        this.label = '角色名称'
        this.roleShow = true
      } else {
        console.log(val)
        this.groupTitle = '修改角色组'
        this.form.encoded = val.GROUP_NAME
        this.label = '角色组'
      }
      this.roleShow = true
    },
    // 新增角色确认按钮
    async groupSaveFn () {
      this.$refs.form.validate(async valid => {
        if (valid) {
          let res
          if (this.groupTitle == '新增角色组') {
            res = await putSysRoleGroup({ groupName: this.form.encoded })
          } else if (this.groupTitle == '修改角色组') {
            res = await postSysRoleGroup(
              fd({ groupName: this.form.encoded, id: this.groupClickId })
            )
          } else if (this.groupTitle == '新增角色') {
            res = await putSysRole(
              fd({ groupId: this.groupClickId, roleName: this.form.encoded })
            )
          } else {
            res = await postSysRole(
              fd({
                groupId: this.groupClickId,
                roleName: this.form.encoded,
                id: this.roleClickId
              })
            )
          }
          console.log(res, this.groupTitle)
          if (res.code == 0 && res.data.bcode == 0) {
            this.$message.success('操作成功')
            if (
              this.groupTitle == '新增角色组' ||
              this.groupTitle == '修改角色组'
            ) {
              this.$parent.getData()
            } else {
              this.$parent.pageFun()
            }
            this.form.encoded = ''
            this.roleShow = false
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 14px;
  width: 100%;
  background-color: #66b1ff;
  color: #fff;
  margin-top: 20px;
}
.caidan {
  width: 100%;
  height: calc(100vh - 354px);
  border: 1px solid #ccc;
  position: relative;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
  .el-tree {
    // padding: 20px;
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-dropdown {
    position: absolute;
    background-color: #fff;
    right: 0px;
    width: 20px;
  }

  .el-tree-node:focus > .el-tree-node__content .el-dropdown {
    background-color: #f5f7fa;
  }
  .el-tree-node__content:hover .el-dropdown {
    background-color: #f5f7fa;
  }

  .el-dropdown .el-button {
    width: 10px;
    height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.edialogOne {
  .top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    .toptitle {
      width: 50px;
    }
    .el-input {
      flex: 1;
    }
    .el-button--primary {
      margin-left: 50px;
    }
  }
}
.empower {
  border: 1px solid #dcdfe6;
  height: 400px;
  overflow: hidden auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
